<script setup>
    import { computed, ref } from 'vue';
    import { useRouter,useRoute } from 'vue-router';
    import ShopInfo from '@/components/home/ShopInfo.vue';
    import Product from '@/components/shop/Product.vue';
    import CartBottom from '@/components/shop/CartBottom.vue'
    import {useShopInfoStore} from '@/stores/shop';

    const router = useRouter()
    const route = useRoute()

    //获取数据
    const shopInfo = useShopInfoStore()
    const list = shopInfo.nearbyList
    const listNew = ref([])

    //获取id
    let id = route.query.id
    
    //根据id来查询是点击哪个数据
    listNew.value = list.find((item)=>{
        return item.id == id
    })


    //获取商品类别
    let listTwo = listNew.value.category


     //let listTow = list.filter((item)=>{
     //    return item.id == id
     //})

    // console.log("listNew的值");
    // console.log(listNew);

    // console.log("listTow的值");
    // console.log(listTow);
    
    let shopId = ref(0);
    
    
    const allShop = computed(()=>{
        let arr = []
        //判断是否点击全部商品
        if (shopId.value === 0) {

            listTwo.forEach(item=>{
                arr = [...arr,...item.list]
            })
            
            return arr
        }else{

            arr = listTwo.find(item=>{
                return item.id === shopId.value
            })
            
            return arr
        }
    })

    let shopList = ref(allShop.value)

    //商品分类的点击
    const CurShop = (id)=>{
        shopId.value = id
        if (shopId.value == 0) {
            shopList.value = allShop.value
        }else{
            shopList.value = allShop.value.list
        }

        console.log(shopList.value);
        console.log(allShop.value);
    }

    //返回方法
    const back = ()=>{
        router.push({
            path:'/home'
        })
    }


</script>

<template>
    <div class="shop">
        <!-- 搜索 -->
        <div class="search">
            <span class="iconfont search_back" @click="back">&#xe697;</span>
            <div class="search_content">
                <span class="iconfont search_content_icon">&#xe632;</span>
                <input type="text" class="search_content_input" placeholder="请输入商品名称">
            </div>
        </div>
        <!-- 商店信息 -->
        <div class="shop_info">
            <ShopInfo :item="listNew"></ShopInfo>
        </div>
        <!-- 内容 -->
        <div class="content">
            <div class="category">
                <div class="category_item" @click="CurShop(0)"
                    :class="{'category_item--active' : shopId === 0}"
                >全部商品</div>
                <div class="category_item" v-for="item,index in listTwo" :key="index" @click="CurShop(item.id)"
                    :class="{'category_item--active' : shopId === item.id}"
                >
                    {{ item.name }}
                </div>
            </div>
            <div class="product">
                <div v-for="item,index in shopList" :key="item.id">
                    <Product :item="item" :shopName="listNew.name"></Product>
                </div>
            </div>
        </div>
        <!-- 购物车底部 -->
        <CartBottom :shopName="listNew.name"></CartBottom>
    </div>
</template>

<style lang="scss" scoped>
@import "@/style/viriables.scss";
.shop {
    //搜索
    .search {
        margin: .18rem;
        display: flex;
        align-items: center;

        &_back {
            font-size: .24rem;
            margin-right: .08rem;
            color: #b6b6b6;
        }
        &_content {
            flex: 1;
            height: .32rem;
            background-color: #f5f5f5;
            border-radius: .16rem;
            display: flex;
            align-items: center;

            &_icon {
                color: #b6b6b6;
                margin: 0 .12rem;
            }
            &_input {
                border: none;
                outline: none;
                background: none;
                width: 100%;
                height: .32rem;
            }
        }
    }
    //商店信息
    .shop_info {
        margin: 0 .18rem;
    }
    // 内容
    .content {
        position: absolute;
        left: 0;
        right: 0;
        top: 1.7rem;
        bottom: .5rem;
        display: flex;

        .category {
            overflow-y: scroll;
            width: .78rem;
            background-color: #f5f5f5;

            &_item {
                line-height: .4rem;
                font-size: .14rem;
                text-align: center;
                color: $content_fontcolor;

                &--active {
                    background-color: $bgColor;
                }
            }
        }
        .product {
            flex: 1;
            overflow-y: scroll;
        }
    }
}
</style>